<template>
  <div class="m-fight-order">
    <!-- 拼单商品 -->
    <!-- tabs -->
    <!-- <div class="tabs clearfix">
      <span class="tab fl" :class="{'actived-tab': params.orderMain == '1'}" @click="fetchOrderList('1')">主订单</span>
      <span class="tab" :class="{'actived-tab': params.orderMain == '0'}" @click="fetchOrderList('0')">子订单</span>
    </div> -->

    <!-- 搜索条件 -->
    <div class="fight-search" v-if="moreOptions">
      <div class="o" v-if="params.monthType == ''">
        <span class="title">拼单时间</span>
        <div class="dis-block">
          <div class="date dis-block">
            <w-date-picker language="ch" placeholder="起始时间" v-model="params.addStartTime"></w-date-picker>
          </div>
          <span class="icon">—</span>
          <div class="date dis-block">
            <w-date-picker language="ch" placeholder="结束时间" v-model="params.addEndTime"></w-date-picker>
          </div>
        </div>
      </div>
      <div class="o">
        <span class="title">拼单状态</span>
        <div class="o-select dis-block">
          <w-select :options="fightOptions" v-model="params.isAlready"></w-select>
        </div>
      </div>
      <!-- <div class="o">
        <span class="title">订单类型</span>
        <div class="o-select dis-block">
          <w-select></w-select>
        </div>
      </div> -->
      <div class="o">
        <span class="title">商品货号</span>
        <div class="input dis-block">
          <w-input holder="请填写" v-model="params.goodsSerial"></w-input>
        </div>
      </div>
      <div class="o">
        <span class="title">商品名称</span>
        <div class="input dis-block">
          <w-input holder="请填写" v-model="params.goodsName"></w-input>
        </div>
      </div>
      <div class="o">
        <span class="title">订单编号</span>
        <div class="o-select dis-block">
          <w-input holder="请填写" v-model="params.orderId"></w-input>
        </div>
      </div>
      <!-- <div class="o">
        <span class="title">商家账号</span>
        <div class="input dis-block">
          <w-input holder="请填写"></w-input>
        </div>
      </div> -->
      <div class="o">
        <span class="title">店铺名称</span>
        <div class="input dis-block">
          <w-input holder="请填写" v-model="params.storeName"></w-input>
        </div>
      </div>
    
      <!-- 操作按钮 -->
      <div class="order-options">
        <w-button-group>
          <w-button type="main" @on-click="onSearchList">搜索订单</w-button>
          <!-- <w-button type="option" style="margin-left: 30px">导出</w-button> -->
        </w-button-group>
      </div>
    </div>
    <!-- 收起、展示按钮 -->
    <div class="retact cur" @click="onRetact">
      <span class="option-title">{{moreOptions == true ? '收起': '展开'}}</span>
      <i class="icon-arrow" :class="{'arrow-actived': moreOptions == false}"></i>
    </div>

    <!-- 订单状态 -->
    <div class="order-lists">
      <div>
        <!-- 订单状态列表 -->
        <order-search :search-btns="searchBtns" @on-changeBtns="onChangeOrderStatus"></order-search>
      </div>
      <!-- 操作 -->
      <div class="list-options clearfix">
        <div class="fl">
          <div class="check-box">
            <w-checkbox label="all" name="全选" v-model="all" @on-change="onCheckedAll">
              <span class="all">全部</span>
            </w-checkbox>
          </div>
          <div class="btns-group">
            <w-button-group>
              <w-button :type="`${orderType == 'sign' ? 'main' : 'option'}`" @on-click="onChangeStatus('sign')">标记</w-button>
              <!-- <w-button :type="`${orderType == 'free' ? 'main' : 'option'}`" @on-click="onChangeStatus('free')">免运费</w-button> -->
              <!-- <w-button :type="`${orderType == 'outStock' ? 'main' : 'option'}`" @on-click="onChangeStatus('outStock')">缺货</w-button> -->
            </w-button-group>
          </div>
          <!-- <w-checkbox>
            <span class="no-colse">不显示已关闭的订单</span>
          </w-checkbox> -->
        </div>
        <div class="only-page fr" v-if="orderList.pageCount > 1">
          <w-paging type="showArrow" :current="orderList.currentPage" :total="orderList.pageCount"></w-paging>
        </div>
      </div>

      <div class="order-tab-title clearfix">
        <w-table :columns="columns" style="margin-bottom: 20px;"></w-table>
        <div class="all-order-list" v-if="orderList.recordList && orderList.recordList.length">
          <table v-for="(list, listIndex) in orderList.recordList" :key="listIndex">
            <tr>
              <td colspan="6" class="clearfix order-title">
                <div class="c-h-l fl">
                  <div class="check-box">
                    <w-checkbox :label="`list${listIndex}`" name="订单" v-model="list.checked" @on-change="_setStoreToAllCheck"></w-checkbox>
                  </div>
                  <span>订单编号：<span style="color: #2576FF">{{list.orderId}}</span></span>
                </div>
                <div class="c-h-r fl">
                  <span class="store-name">结束时间：{{list.fightGoodsEndTime}}</span>
                </div>
                <div class="fr" style="position: relative;">
                  <!-- <w-button class="print-btn" type="option" @on-click="onJumpPrint(list.id)">打印订单</w-button> -->
                  <div class="flag cur" v-if="list.storeSign && list.storeSign != null" @click="onLookSing(list.storeSignInfo)">
                    <img src="../../assets/flag_black.png" alt="">
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td style="width: 34%">
                <div class="goods-info clearfix">
                  <div class="goods-img fl">
                    <img v-lazy="list.mainPhotoPath" alt="">
                  </div>
                  <div class="goods">
                    <p class="p-line-hide p">{{list.goodsName}} {{list.goodsSerial}}</p>
                    <br>
                    <span class="goods-type">商品类型：{{list.goodsNumType == '1' ? '现货' : '期货'}}</span>
                  </div>
                </div>
              </td>
              <td style="width: 16%">{{list.crowdfundingCount || 0}}</td>
              <td style="width: 15%">{{list.isAlready == '0' ? '拼单中' : (list.isAlready == '1' ? '拼单成功' : '拼单失败')}}</td>
              <td style="width: 15%">{{list.checkOutCount}}</td>
              <td style="width: 16%">
                <span class="cur c-main" @click="$router.push(`/orderMange/fMODetali/${list.goodsRuleId}?three=${$route.query.three}`)">查看</span>
                <br>
                <span class="cur c-main" @click="onSearchOrderList(list.id)">查看子订单</span>
              </td>
            </tr>
        
          </table>
        </div>
        <div v-else>
          <p style="text-align: center;">暂无数据</p>
        </div>
        <div style="margin: 20px 0 20px" class="fr" v-if="orderList.pageCount > 1">
          <w-paging :current="orderList.currentPage" :total="orderList.pageCount" @on-change="onChangePage"></w-paging>
        </div>
      </div>
    </div>

    <!-- 标记 -->
    <w-panel-validate :panel-title="panelTitleSing" title="标记" v-model="panelTitleSing" :confirm-text="`提交`" @on-confirm="onConfirmSign" @on-cancel="_cancelSign">
      <div class="m-confirm-sign">
        <div class="sign">
          <span class="title">标记</span>
          <div class="info">
            <div class="flag">
              <w-radio :label="`red`" name="flag" v-model="storeSign">
                <img src="../../assets/flag_red.png" alt="">
              </w-radio>
            </div>
            <div class="flag">
              <w-radio :label="`yellow`" name="flag" v-model="storeSign">
                <img src="../../assets/flag_yellow.png" alt="">
              </w-radio>
            </div>
            <div class="flag">
              <w-radio :label="`green`" name="flag" v-model="storeSign">
                <img src="../../assets/flag_green.png" alt="">
              </w-radio>
            </div>
            <div class="flag">
              <w-radio :label="`blue`" name="flag" v-model="storeSign">
                <img src="../../assets/flag_blue.png" alt="">
              </w-radio>
            </div>
            <div class="flag">
              <w-radio :label="`purple`" name="flag" v-model="storeSign">
                <img src="../../assets/flag_purple.png" alt="">
              </w-radio>
            </div>
          </div>
        </div>
        <div class="sign">
          <span class="title" style="vertical-align: top;">标记备注</span>
          <div class="info">
            <div class="text-area">
              <w-input type="textarea" holder="请输入" rule="isEmpty" error="请输入备注信息" v-model="storeSignInfo"></w-input>
            </div>
            <w-radio label="1" name="sign" v-model="singP" class="radio">覆盖已有标记内容</w-radio>
          </div>
        </div>
      </div>
    </w-panel-validate>

    <!-- 查看标记弹出框 -->
    <w-panel-fixed-wrap v-model="signStatus" title="标记备注" :show-btns="!signStatus" :panel-title="signStatus" :show-close="signStatus">
      <div class="sign-panel">
        <span style="vertical-align: top">标记备注：</span>
        <div class="remark">
          {{signInfo}}
        </div>
      </div>
    </w-panel-fixed-wrap>

  </div>
</template>

<script>
// 订单状态列表 
import OrderSearch from './components/orderSearch'
import { apiOrderMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      all: false, // 全选
      moreOptions: true, // 是否展示搜索条件
      orderType: '', // 订单状态
      searchBtns: [
        {
          title: '当月订单',
          status: 'month'
        },
        {
          title: '全部订单',
          status: ''
        },
        {
          title: '上月订单',
          status: 'befMonth'
        }
      ],
      columns: [
        {title: '货品', width: '34%'},
        // {title: '标记', width: '10%'},
        {title: '拼单发货总量', width: '16%'},
        {title: '拼单状态', width: '15%'},
        {title: '已拼数量', width: '15%'},
        {title: '操作', width: '16%'}
      ],
      panelTitleSing: false, // 标记
      signStatus: false, // 查看标记操作弹出框
      storeSign: 'red', // 标记颜色
      storeSignInfo: '', // 标记内容
      singP: '1',
      signInfo: '', // 查看标记
      fightOptions: [
        {label: '拼单中', value: 'fighting'},
        {label: '拼单成功', value: 'success'},
        {label: '拼单失败', value: 'fail'}
      ],
      // 获取拼单列表--参数
      params: {
        accessToken: this.$store.getters.token || '',
        threeMenuCode: this.$route.query.three || '',
        orderMark: '1', // 订单类型:1,拼单
        currentPage: 1,
        showCount: 20,
        storeName: '',
        orderId: '',
        addStartTime: '',
        addEndTime: '',
        monthType: 'month',
        goodsSerial: '',
        goodsName: '',
        isAlready: '', // 拼单状态 fighting：拼单中； success：成功； fail:失败
        deleteStatus: '' // 不显示已关闭的订单
      },
      orderList: {}
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  components: {
    'order-search': OrderSearch
  },
  created() {
    this.fetchOrderList()
  },
  methods: {
    /**
     * 获取拼单订单列表
     */
    fetchOrderList() {
      apiOrderMange.apiOrderListAll(this.params).then(data => {
        this.orderList = data.data || {}
        if (this.orderList.recordList && this.orderList.recordList.length) {
          this.orderList.recordList.forEach(list => {
            this.$set(list, 'checked', this.all)
          })
        }
      })
    },
    /**
     * 分页
     */
    onChangePage(page) {
      this.params.currentPage = page
      this.fetchOrderList()
    },
    /**
     * 切换全选
     */
    onCheckedAll(checked) {
      if (!this.orderList.recordList || this.orderList.recordList.length == 0) return
      if (checked) {
        this.orderList.recordList.forEach(list => {
          list.checked = true
        })
      } else {
        this.orderList.recordList.forEach(list => {
          list.checked = false
        })
      }
    },
    // 判断选中商户的个数，是否和展示的长度相同，true相同，则选中全部，false全部取消
    _setStoreToAllCheck() {
      const orderList = this.orderList.recordList
      let aStore = orderList.filter(item => {
        return item.checked === true
      })
      if (aStore.length === orderList.length) {
        this.all = true
      } else {
        this.all = false
      }
    },
    /**
     * 条件搜索
     */
    onSearchList() {
      this.params.currentPage = 1
      this.fetchOrderList()
    },
    /**
     * 收起更多的搜索条件
     */
    onRetact() {
      this.moreOptions = !this.moreOptions
    },
    /**
     * 查询当月，上月，全部列表
     */
    onChangeOrderStatus(type) {
      // 重置参数
      this.params = {
        accessToken: this.$store.getters.token || '',
        threeMenuCode: this.$route.query.three || '',
        orderMark: '1', // 订单类型:1,拼单
        currentPage: 1,
        showCount: 20,
        storeName: '',
        orderId: '',
        addStartTime: '',
        addEndTime: '',
        monthType: type,
        goodsSerial: '',
        goodsName: '',
        isAlready: '', // 拼单状态 fighting：拼单中； success：成功； fail:失败
        deleteStatus: '' // 不显示已关闭的订单
      }
      this.fetchOrderList()
    },
    /**
     * 查看子订单列表，跳转至普通订单列表commonOrder，标识为origin=fight
     */
    onSearchOrderList(mainId) {
      this.$router.push(`./cOrder?three=${this.$route.query.three}&origin=fight&mainid=${mainId}`)
    },
    /**
     * 切换订单是否标记、免费、缺货等
     */
    onChangeStatus(type) {
      if (this.orderList.recordList && this.orderList.recordList.length) {
        this.orderList.recordList.forEach(list => {
          if (list.checked) {
            this.orderType = type
            if (type == 'sign') {
              this.panelTitleSing = true // 显示标记操作弹框
            }
          }
        })
      }
    },
    /**
     * 标记提交
     */
    onConfirmSign() {
      let _this = this
      const params = {
        accessToken: this.token,
        ofId: [],
        storeSign: this.storeSign, // 标记类型
        storeSignInfo: this.storeSignInfo, // 内容
        type: 3
      }
      this.orderList.recordList.forEach(list => {
        if (list.checked) {
          params.ofId.push(list.id)
          apiOrderMange.apiDeliveryGoodsFar(params).then(data => {
            _this.$toast('标记成功', () => {
              _this.fetchOrderList()
              _this.panelTitleSing = false
              _this.orderType = ''
              _this.all = false
              list.checked = false
            })
          })
        }
      })
    },
    /**
     * 清空标记内容
     */
    _cancelSign() {
      this.storeSignInfo = ''
    },
    /**
     * 打印
     */
    onJumpPrint(orderId) {
      window.open(`/orderMange/print/${orderId}?three=${this.$route.query.three}`)
    },
    /**
    *@augments orderID 查看标记弹框
     */
    onLookSing(signInfo) {
      this.signStatus = true
      this.signInfo = signInfo
    }
  }
}
</script>

<style lang="scss">
.order-options {
  .btn-group button {
    width: 170px;
  }
}
.m-confirm-sign {
  .text-area {
    .form-control {
      height: 90px!important;
    }
    .w-input .error-tip {
      top: 56px;
    }
  }
}
</style>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
.m-confirm-sign {
  // text-align: center;
  .sign {
    margin-bottom: 20px;
  }
  .title {
    width: 80px;
    display: inline-block;
    text-align: right;
    font-size: 12px;
  }
  .info {
    width: 300px;
    margin-left: 10px;
    display: inline-block;
  }
  .radio {
    text-align: left;
    width: 100%;
    margin-top: 10px;
  }
  .flag {
    display: inline-block;
    margin-right: 3%;
    img {
      width: 14px;
      height: 14px;
    }
  }
}
.order-title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #F2F2F2;
  border: 1px solid #DBDBDB;
  padding: 0 20px 0 8px;
  & >div {
    display: inline-block;
  }
  .check-box {
    display: inline-block;
    margin-right: 10px;
    line-height: 22px;
  }
  .c-h-r {
    margin-left: 40px;
    position: relative;
  }
  .store-name {
    font-weight: bold
  }
  .flag {
    width: 14px;
    height: 14px;
    display: inline-block;
    margin-left: 20px;
  }
  .print-btn {
    position: absolute;
    right: 30px;
    top: 5px;
    width: 60px;
  }
}
.tabs {
  border-bottom: 1px solid $border-gray-light;
  .tab {
    display: inline-block;
    width: 70px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #D8D8D8;
    cursor: pointer;
  }
  .actived-tab {
    background-color: $color-main;
    color: #ffffff;
  }
}
.fight-search {
  padding: 20px 20px 0;
  .title {
    width: 56px;
    text-align: right;
    display: inline-block;
    margin-right: 10px;
    font-size: 12px;
  }
  .icon {
    padding: 0 10px;
  }
  .dis-block {
    display: inline-block;
  }
  .date {
    width: 170px;
    vertical-align: middle;
  }
  .o {
    margin-right: 40px;
    margin-bottom: 20px;
    display: inline-block;
  }
  .select {
    width:142px;
    height:28px; 
    vertical-align: middle;
  }
  .o-select {
    width: 170px;
    height: 28px;
  }
  .input {
    width: 170px;
    vertical-align: middle;
  }
  .order-options {
    margin: 48px auto 20px;
    text-align: center;
  }
}
.retact {
  text-align: center;
  color: #9B9B9B;
  padding-bottom: 5px;
  border-bottom: 1px solid #D7D7D7;
  font-size: 10px;
  .icon-arrow {
    width: 10px;
    height: 5px;
    background: url(../../assets/shouqi.png) no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    margin-bottom: 2px;
  }
  .arrow-actived {
    transform: rotate(-180deg)
  }
}
.order-tab-title {
  margin-bottom: 20px;
  font-size: 12px;
}
.order-lists {
  margin-top: 20px;
  .list-options {
    padding: 14px 0 14px 5px;
  }
  .check-box {
    display: inline-block;
    margin-right: 10px;
    line-height: 22px;
    .all {
      padding-left: 10px;
    }
  }
  .btns-group {
    display: inline-block;
    margin-right: 30px;
  }
  .no-colse {
    padding-left: 10px;
  }
}
.only-page {
  display: inline-block;
}
.pages {
  margin: 30px 0;
}
.all-order-list {
  table {
    width: 100%;
    border: 1px solid $border-gray-light;
    tr {
      &:nth-child(1) {
        height:40px; 
        background:rgba(242,242,242,1);
        border-bottom: 1px solid $border-gray-light;
      }
      .order-nav-title {
        text-align: left;
        font-weight: 600;
        padding-left: 8px;
      }
    }
    td {
      text-align: center;
      &:nth-child(1) {
        width: 28%;
      }
      &:nth-child(2) {
        width: 10%;
      }
      &:nth-child(3) {
        width: 16%;
      }
      &:nth-child(4) {
        width: 15%;
      }
      &:nth-child(5) {
        width: 15%;
      }
      &:nth-child(6) {
        width: 16%;
      }
    }
    .goods-info {
      position: relative;
      padding: 10px;
      font-size: 12px;
      .goods-img {
        width: 88px;
        height: 88px;
      }
      .goods {
        text-align: left;
      }
      .goods-type {
        position: absolute;
        bottom: 10px;
        margin-left: 14px;
      }
      .p {
        padding-left: 14px;
      }
    }
  }
}
.sign-panel {
  .remark {
    width: 85%;
    display: inline-block;
  }
}
</style>
